<template>
	<card-vue id="game-list__content__slot">
		<template #content>
			<slots-list
				multiple
				ref="slotListRef"
				:type="type"
				:titleT="titleT"
				:selectId="modelValue"
				:tagData="tagData"
				:checkedValues="checkedValues"
				:sortingValues="sortingValues"
				@update-gameList-values="handleGameListEvent" />
		</template>
	</card-vue>
</template>
<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
//import CardTitle from '../common/card-title.vue'
import CardVue from '../common/card.vue'
import SlotsList from './slots-list.vue'

// import SupplierFilter from './supplier-filter.vue'
// import { t } from '@/utils/index'

const slotListRef: any = ref(null)
const emit = defineEmits(['update-gameList-values'])
defineProps({
	type: {
		type: String as any,
		default: 'slots'
	},
	modelValue: {
		type: String as any,
		default: 'popular'
	},
	iconName: {
		type: String,
		default: '777'
	},
	titleT: {
		type: String,
		default: ''
	},
	tagData: {
		type: Object,
		default: () => ({
			id: '',
			gameTagGroupId: ''
		})
	},
	checkedValues: {
		type: Array as () => string[],
		default: () => []
	},
	sortingValues: {
		type: String,
		default: '1'
	}
})

const handleGameListEvent = (val: any) => {
	emit('update-gameList-values', val)
}
</script>
<style lang="scss" scoped>
.slot-card__header {
	:deep(.n-popover) {
		padding: 0 !important;
	}
}
</style>
